import {
  modal_disable_ok_button,
  drawerFormState,
  defaultModalFormState,
  tableActiveKey,
  defaultVisible,
} from "../store";
export const modalTitle = ref("");
export const modalConfig = () => {
  const helpRef = ref(<i class="fs10">{$t("withdraw4")}</i>);
  const defineModal = {
    modalInstance: ref(null),
    loading: ref(false),
    visible: defaultVisible[tableActiveKey.value],
    maskClosable: true,
    title: modalTitle,
    formState: defaultModalFormState[tableActiveKey.value],
    disable_ok_button: modal_disable_ok_button,
    on: {
      async finish(values: any) {
        const { formState, loading, visible } = defineModal;
        try {
          loading.value = true;
          setTimeout(() => {
            loading.value = false;
            visible.value = false;
            if (drawerFormState.amount_list.length < 9) {
              drawerFormState.amount_list.push(
                (+formState.temValue).toFixed(2)
              );
              drawerFormState.amount_list.sort(function (a: number, b: number) {
                return a - b;
              });
            }
          }, 300);
        } catch (error: any) {
          loading.value = false;
          message.error(error.message);
        }
      },
    },
    slot: {
      extra_form_item: () => {
        const { formState } = defineModal;
        return (
          <a-col span={24}>
            <a-form-item
              label={$t("withdraw5")}
              name="temValue"
              help={helpRef.value}
              rules={[
                {
                  required: true,
                  trigger: ["change", "blur"],
                  validator: (rule: any, value: string) => {
                    if (!value) {
                      helpRef.value = <i class="fs10">{$t("withdraw6")}</i>;
                      modal_disable_ok_button.value = true;
                      return Promise.reject();
                    }

                    if (
                      drawerFormState.amount_list.indexOf(
                        (+value).toFixed(2)
                      ) >= 0
                    ) {
                      helpRef.value = <i class="fs10">{$t("withdraw7")}</i>;
                      modal_disable_ok_button.value = true;
                      return Promise.reject();
                    }
                    if (+value < 1) {
                      helpRef.value = <i class="fs10">{$t("withdraw8") + 1}</i>;
                      modal_disable_ok_button.value = true;
                      return Promise.reject();
                    }
                    if (+value > 9999999) {
                      helpRef.value = (
                        <i class="fs10">{"1-9999999" + $t("placeholder80")}</i>
                      );
                      return Promise.reject();
                    }
                    helpRef.value = <i class="fs10">{$t("withdraw4")}</i>;
                    modal_disable_ok_button.value = false;
                    return Promise.resolve();
                  },
                },
              ]}
            >
              <div style="display: flex;align-items: center;column-gap: 5px;">
                <a-input
                  style="flex: 7"
                  vModel:value={formState.temValue}
                  placeholder={$t("withdraw6")}
                  onkeyup="value=value?.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                  onInput={({ target: { value } }: any) => {
                    value = value?.replace(/^(0+)|[^\d]+/g, "");
                    formState.temValue = +value > 9999999 ? 9999999 : value;
                  }}
                  onBlur={() => {
                    formState.temValue =
                      +formState.temValue > 9999999
                        ? 9999999
                        : formState.temValue;
                  }}
                />
                <span style="flex: 3">
                  <i>{$t("base.unit")}：</i>
                  <i>USDT</i>
                </span>
              </div>
            </a-form-item>
          </a-col>
        );
      },
    },
  };
  return defineModal;
};
